iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 6
0
Mobile Development

Android 音樂播放器自己來系列 第 6

歌曲列表實作 (4) - 顯示音檔

  • 分享至 

  • xImage
  •  

拿到歌曲資訊後,就可以在畫面顯示啦,要顯示一系列的資訊,最常用的元件就是 RecyclerView 了,還會搭配 Adapter 和 ViewHolder,參考 storage-samples/MediaStore 的 Adapter 寫法是繼承 ListAdapter,然後傳入 DiffUtil.ItemCallback,可以讓 RecyclerView 更有效率更新的元件。

class SongListAdapter(private val onClick: (Song) -> Unit) :
    ListAdapter<Song, SongViewHolder>(Song.DiffCallback) 

關於在 Song 的 DiffCallback,直接用 Song 的 Id 判斷是否為同一首:

val DiffCallback = object : DiffUtil.ItemCallback<Song>() {
            override fun areItemsTheSame(oldItem: Song, newItem: Song) =
                oldItem.id == newItem.id

            override fun areContentsTheSame(oldItem: Song, newItem: Song) =
                oldItem == newItem
        }

在 SongListAdapter 內的 onBindViewHolder:

override fun onBindViewHolder(holder: SongViewHolder, position: Int) {
        val mediaStoreSong = getItem(position)
        holder.itemView.songLayout.tag = mediaStoreSong

        holder.itemView.songNameText.text = mediaStoreSong.title
        holder.itemView.artistNameText.text = mediaStoreSong.artistName
        Glide.with(holder.itemView.context)
            .load(mediaStoreSong.coverPath)
            .centerCrop()
            .into(holder.itemView.songCoverImage)
    }

有三個 UI 元件,分別是顯示歌名、歌手名稱、專輯封面,顯示圖片使用 Glide 來顯示圖片。

在 ViewHolder :

class SongViewHolder(private val view: View, onClick: (Song) -> Unit) :
    RecyclerView.ViewHolder(view), LayoutContainer {

    override val containerView: View?
        get() = view

    init {
        view.songLayout.setOnClickListener {
            val song = view.songLayout.tag as? Song ?: return@setOnClickListener
            onClick(song)
        }
    }
}

ViewHolder 的部分,就比較一般,傳入點擊的 lamda 參數,使用者點擊歌曲時,可以回傳點擊的歌曲物件,並使用 Kotlin extension 綁定 view id。

關於 UI 排版有一個地方要稍微注意一下的地方是,歌曲和歌手名稱長度可能會很長,需要限制行數,並且讓顯示不完的字數在後面顯示 ...

<item name="android:maxLines">1</item>
<item name="android:ellipsize">end</item>

使用端的程式,初始化 SongListAdapter 和 songRecyclerView,並使用 LiveData 的方式來觀察是否有歌曲,有歌曲就通知 songAdapter:

 override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        val songAdapter = SongListAdapter {
            clickSong(it)
        }

        with(songRecyclerView) {
            layoutManager = LinearLayoutManager(activity)
            adapter = songAdapter
        }

        songListViewModel.songs.observe(this.viewLifecycleOwner, Observer<List<Song>> {             songs -> songAdapter.submitList(songs)
        })
    }

程式碼在這,分支名稱(day6_show_songs):Fancy/day6_show_songs

到這邊,歌曲列表顯示就大功告成啦!明天就要來播這些歌了嗎?先等一下,還有一件事要處理 XD


上一篇
歌曲列表實作 (3) - 撈取音檔
下一篇
歌曲列表實作 (5) - 番外篇
系列文
Android 音樂播放器自己來30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言